//问,怎么把dialog/draw编程命令式编程?
//elementplus上的组件,比如el-dialog是封装好的组件,约等于类
//组件声明其实就是导出一个对象{setup:()=>{}}或者render函数,这两个函数最后返回vnode
//使用h函数,或者jsx中直接尖括号调用,就是对象vnode
//vnode挂载后即可显示在页面上
import { createApp, ref } from "vue";
import ElementPlus from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ElDrawer } from "element-plus";
import DetailForm from "@/components/SuperForm/DetailForm.vue";
import SubmitForm from "@/components/SuperForm/SubmitForm.vue";
export function openDrawer(el_drawer_props = {}, container_vnode = "未传vnode") {
  //1.创建一个真实dom
  const container = document.createElement("div");
  //2.定义一个vue
  let slots = {
    default: container_vnode
  };

  //3.定义eldrawer
  let show = ref(true);
  let close = () => {
    alert(2);
    debugger;
    //6.移除真实dom
    show.value = false;
    //这样为什么没有响应式?
  };
  let vnode = () => [
    <ElDrawer {...el_drawer_props} v-slots={slots} modelValue={show} onUpdate:modelValue={v => (show.value = v)}></ElDrawer>
  ];
  setTimeout(() => {
    show.value = false;
  }, 2000);
  createApp(vnode).use(ElementPlus, { locale: zhCn }).mount(container);
  //4.将真实dom添加到body上
  document.body.appendChild(container);

  return close;
}
export default function openDrawerWithForm(type, formProps, funcname) {
  //先生成表单的vnode
  let vnode = null;
  let title = null;
  let close = null;
  let events = {
    onCancel: () => {
      //取消按钮
      console.log("取消按钮");
      close && close();
    },
    onSubmit: () => {
      //确定按钮
      console.log("确定按钮");
    }
  };

  if (type == "add") {
    vnode = <SubmitForm {...formProps} style={"height:100%"} {...events}></SubmitForm>;
    title = "新增" + funcname;
  } else if (type === "update") {
    vnode = <SubmitForm {...formProps} style={"height:100%"} {...events}></SubmitForm>;
    title = "修改" + funcname;
  } else {
    vnode = <DetailForm {...formProps} style={"height:100%"} {...events}></DetailForm>;
    title = "详情";
  }
  //2.调用openDrawer
  let el_drawer_props = {
    title: title
  };

  close = openDrawer(el_drawer_props, vnode);
}
